import { Modal, Spin, message, Button, Tag } from 'antd';
import React, { useState } from 'react';
import { changeCorp } from '@/services/user';
import { CheckCard } from '@ant-design/pro-components';

interface ChangeCorpProps {
  modalVisible: boolean;
  showCancel: boolean;
  cardList: any[];
  select?: string;
  onOk: (select: string, corp: any) => void;
  onCancel?: () => void;
  onBack?: () => void;
}

const ChangeCorpModal: React.FC<ChangeCorpProps> = (props) => {
  const { showCancel, cardList, select, onOk, modalVisible, onCancel, onBack } = props;
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [selectId, setSelect] = useState<string>(select || '');
  const [selectCorp, setCorp] = useState<any>({});

  const setSubmit = async () => {
    if (selectId) {
      if (selectId === select) {
        message.info('当前已是该企业');
      } else {
        setSubmitting(true);
        const res = await changeCorp({ corpId: selectId });
        setSubmitting(false);
        if (res.success) {
          onOk(selectId, selectCorp);
        } else {
          message.error(res.errMsg || '切换失败,请稍后重试');
        }
      }
    } else {
      message.info('请先选择登录公司');
    }
  };

  const onChange = (value: any) => {
    if (value) {
      const selectC = cardList.filter((item) => item.id === value);
      setSelect(value);
      setCorp(selectC[0]);
    }
  };

  const footerNode1 = [
    <Button key="back" onClick={onCancel}>
      取 消
    </Button>,
    <Button key="submit" type="primary" loading={submitting} onClick={setSubmit}>
      确定切换
    </Button>,
  ];

  const footerNode2 = [
    <Button
      key="back"
      onClick={() => {
        if (onBack) {
          onBack();
        }
      }}
    >
      退出登录
    </Button>,
    <Button key="submit" type="primary" loading={submitting} onClick={setSubmit}>
      确 定
    </Button>,
  ];

  return (
    <Modal
      destroyOnClose
      title="切换登录企业"
      visible={modalVisible}
      width={750}
      footer={showCancel ? footerNode1 : footerNode2}
      closable={showCancel}
      keyboard={showCancel}
      maskClosable={showCancel}
      onCancel={onCancel}
    >
      <Spin tip="稍等..." spinning={submitting}>
        <CheckCard.Group onChange={onChange} defaultValue={selectId}>
          {cardList &&
            cardList.map((item) => {
              return (
                <CheckCard
                  title={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      {item.type == 1 ? <Tag color="#55acee" style={{ padding: '0 5px', marginRight: '4px' }}>施工方</Tag> : null}
                      {item.type == 2 ? <Tag color="#cd201f" style={{ padding: '0 5px', marginRight: '4px' }}>建设方</Tag> : null}
                      {item.type == 3 ? <Tag color="#3b5999" style={{ padding: '0 5px', marginRight: '4px' }}>劳务方</Tag> : null}
                      <span>{item.name}</span>
                    </div>
                  }
                  description={`统一社会信用代码: ${item.code}`}
                  value={item.id}
                  key={item.id}
                />
              );
            })}
        </CheckCard.Group>
      </Spin>
    </Modal>
  );
};

export default ChangeCorpModal;
